<template>
	
	<div class="mains">
		<u-form :model="form" ref="uForm">
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="account" label-width="150" :label-position="labelPosition" label="姓名" prop="name">
				 <picker mode="selector" :value="index" :range="list" range-key="true_name"  @change="bindPickerChange">
				         <view class="uni-input">{{list[index].true_name}}</view>
				 </picker>
			</u-form-item>
		
			<u-form-item left-icon="server-man"  label="店铺名称" label-width="170" >
				<u-input v-model="form.name"  placeholder="请输入店铺名" />
			</u-form-item>
		<u-form-item left-icon="more-circle"  label="店铺简介" label-width="170" >
			<u-input v-model="form.text"  placeholder="请输入简介" />
		</u-form-item>
			<u-form-item label="证件" :label-position="auto-upload" :error-type="errorType" label-width="500upx">
				<u-upload style="text-indent: 0;" ref="uUpload" :action="action" :file-list="fileList" :auto-upload="true"
				 :max-count="1" :header="header" :name="name" @on-uploaded="onUploaded" :before-upload="beforeUpload" size-type="compressed"></u-upload>
			</u-form-item>
		</u-form>
		<u-toast ref="uToast" />
		<div class="baocun"  @click="submit()">
			保存	
		</div>
	</div>
		
</template>

<script>
	export default {
		data() {
			return {
				agent_id:"",
				iswhow: true,
				defaultSelector: [0],
				params: {
					user_name: true
				},
				labelposition: "left",
				action: "",
				show: false,
				errorType: ['none'],
				names: "",
				fileList: [],
				header: {
					"token": this.token
				},
				labelPosition: 'left',
				name: "img",
				showimg: "",
				index: 0,
				form: {
					name: '',
					shop: '',
					text: ""
				},
				rules: {
					name: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur',
						},
						{
							min: 2,
							max: 5,
							message: '姓名长度在2到5个字符',
							trigger: ['change', 'blur'],
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.chinese(value);
							},
							message: '姓名必须为中文',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						},
					],
					intro: [{
							required: true,
							message: '请填写简介'
						},
						{
							min: 5,
							message: '简介不能少于5个字',
							trigger: 'change',
						},
						// 正则校验示例，此处用正则校验是否中文，此处仅为示例，因为uView有this.$u.test.chinese可以判断是否中文
						{
							pattern: /^[\u4e00-\u9fa5]+$/gi,
							message: '简介只能为中文',
							trigger: 'change',
						},
					],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
				},
				list: [],
				list2:[1,3,57,9],
				radio: '',
				switchVal: false,
				userid: "",
			}
		},
		onLoad() {
			var that=this
			wx.showLoading({
				  title: '加载中',
				  success(){
					  that.getagendid()
					  that.$refs.uForm.setRules(that.rules);
					  that.uUpload = that.$refs.uUpload
					  that.action = that.$url + "/index.php/api/v1.Tool/uploadFlie"
				  }
				})
			setTimeout(function () {
			  wx.hideLoading()
			}, 1000)
			
			
		},
		methods: {
		
			getagendid() {
				var that = this
				wx.getStorage({
					key: 'agent_id',
					success(res) {
						console.log(res.data)
						that.agent_id = res.data
						that.getkehu()
					}
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
				console.log(this.list[e.target.value].id)
				this.userid = this.list[e.target.value].id
				this.form.name=this.list[e.target.value].true_name
				console.log(this.form.name)
			},
			onUploaded(lists) {
				this.filesArr = lists;
				console.log(this.$url + lists[0].response.url)
				this.shop_urls = this.$url + lists[0].response.url
				console.log(this.shop_urls);
			},
			beforeUpload(index, list) {
				if (index % 2 == 0) return true;
				else return false;
			},
			changename: function(e) {
				console.log("正在改变")
				this.index = e.target.value
				console.log(e.target.value)
			},
			 submit(){
				 console.log("进入了提交");
				 var that=this
				 console.log(that.agent_id)
				 console.log(that.form.name);
				 console.log(that.form.text);
				 console.log(that.userid);
				 this.go()
			 },
			go() {
				var that = this
				console.log("进入了go");
				this.$flyio.post('v1.Shop/shopAdd', {
					customer_id:that.userid,
					shop_name:that.form.name,
					shop_urls: that.shop_urls,
					shop_describe: that.form.text
				}).then((ret) => {
					console.log("添加结果");
					console.log(ret);
				if(ret.code==0){
					that.goseccess()
					}
					else{
					that.gofail(ret.msg)
				}
				})
				.catch((e) => {
					console.log(e)
				})
				// if (that.userid) {
				// 	wx.request({
				// 		url: that.$url + '/api/v1.Shop/shopAdd', //仅为示例，并非真实的接口地址
				// 		method: 'POST',
				// 		data: {
				// 			// agent_id:that.agent_id,
				// 			customer_id: that.userid,
				// 			shop_name: that.form.name,
				// 			shop_urls: that.shop_urls,
				// 			shop_describe: that.form.text
				// 		},
				// 		header: {
				// 			token: that.token, // 默认值
				// 		},
				// 		success(res) {

				// 			console.log(res.data.msg)
				// 			if(res.data.msg=="添加成功"){
				// 				that.goseccess()
				// 				// console.log("店铺添加成功")
				// 			}
				// 			else{
				// 				that.gofail(res.data.msg)
				// 			}

				// 		},
				// 		fail() {
				// 		}
				// 	})
				// }
			},
			goseccess() {
				this.$refs.uToast.show({
					title: '店铺添加成功',
					type: 'success',
					url: '/pages/shop/banlv'
				})
			},
			gofail(x) {
				this.$refs.uToast.show({
					title: x,
					type: 'warning',
					// url: '/pages/user/index'
				})
			},
			getkehu() {
				var that = this
				console.log("获取绑定客户列表");
				this.$flyio.get('v1.Agent/selectCustomerList', {
					agent_id: that.agent_id,
					page:1,
					limit:10
				}).then((ret) => {
					// 	that.list=ret.data
					console.log(ret.data.data);
					that.list=ret.data.data
					console.log("获取绑定客户列表成功");
					// console.log(ret)
				})
				.catch((e) => {
					console.log(e)
				})
				// wx.getStorage({
				// 	key: 'agent_id',
				// 	success(res) {
				// 		console.log("agent_id");
				// 		// console.log(res.data)
				// 		wx.request({
				// 			url: that.$url + '/api/v1.Agent/selectCustomerList', //仅为示例，并非真实的接口地址
				// 			method: 'GET',
				// 			data: {
				// 				page: 1,
				// 				limit: 10,
				// 				agent_id: res.data
				// 			},
				// 			header: {
				// 				token: that.token
				// 			},
				// 			success(res) {
				// 				console.log("查看自身客户店铺成功")
				// 				console.log(res)
				// 				// that.list = res.data.data.data
				// 			},
				// 			fail() {
				// 				console.log("发送失败")
				// 			}
				// 		})
				// 	}
				// })

			},
		}
	}
</script>

<style scoped lang="scss">
	.mains {
		display: flex;
		height: 100%;
		width: 100%;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin: 0 auto;
		// border: 1px solid red;
		flex-direction: column;
		justify-content: space-between;
	}

	.wrap {
		// background-color: green;
		padding: 20rpx;
		
		// border: 1px solid red;
		// flex-direction: column;
		// justify-content: space-between;
		// height: 100%;
		// background-color: red;
	}

	.box {}
</style>
